<template>
  <v-card>
    <v-card-title flat color="white">
      <!-- 按钮-->
      <v-btn color="primary" @click="addBrand">新增品牌</v-btn>
      <!--空间隔离板-->
      <v-spacer/>
      <!--搜索框-->
      <v-text-field label="输入关键字搜索" v-model="search" append-icon="search" hide-details/>
    </v-card-title>

    <v-data-table
      :headers="headers"
      :items="brands"
      :pagination.sync="pagination"
      :total-items="totalBrands"
      :loading="loading"
      class="evevation-1"
    >

      <template slot="items" slot-scope="props">
        <td class="text-xs-center">{{ props.item.id }}</td>
        <td class="text-xs-center">{{ props.item.name }}</td>
        <td class="text-xs-center">
          <img v-if="props.item.image" :src="props.item.image" width="130" height="40">
        </td>
        <td class="text-xs-center">{{ props.item.letter }}</td>
        <td class="text-xs-center">
          <v-icon small class="mr-2" @click="editBrand(props.item)" title="编辑">
            edit
          </v-icon>
          <v-icon small @click="deleteBrand(props.item.id)" title="删除">
            delete
          </v-icon>
        </td>
      </template>
    </v-data-table>

    <!--弹出的对话框-->
    <!--  persistent：控制窗口不会被意外关闭  -->
    <v-dialog max-width="500" v-model="show" persistent>
      <v-card>
        <!--对话框的标题-->
        <v-toolbar dense dark color="primary">
          <v-toolbar-title>{{isEdit ? '修改': '新增'}}品牌</v-toolbar-title>
          <v-spacer/>
          <!--关闭窗口的按钮-->
          <v-btn icon @click="closeWindow">
            <v-icon>close</v-icon>
          </v-btn>
        </v-toolbar>

        <!--对话框的内容，表单-->
        <v-card-text class="px-5">
          <!--在父组件中给子组件绑定close事件，用来关闭弹框-->
          <my-brand-form @close="closeWindow" :oldBrand="oldBrand" :isEdit="isEdit"/>
        </v-card-text>
      </v-card>
    </v-dialog>
  </v-card>
</template>

<script>
  import MyBrandForm from './MyBrandForm'


  export default {
    components: {MyBrandForm},
    comments: {
      MyBrandForm
    },

    name: 'myBrand',
    data() {
      return {
        search: '',  //查询关键字
        totalBrands: 0,  //列表数据总条数
        brands: [],  //当前页数据
        loading: true,  //是否显示加载进度
        pagination: {},  //分页信息
        headers: [
          {text: 'id', align: 'center', value: 'id'},
          {text: '名称', align: 'center', value: 'name'},
          {text: 'LOGO', align: 'center', value: 'image'},
          {text: '首字母', align: 'center', value: 'letter'},
          {text: '操作', align: 'center', value: 'id', sortable: false},
        ],
        show: false, //控制对话框的显示
        oldBrand: {},  //编辑的品牌数据（用户数据回显）
        isEdit: false,  //是否是编辑
      }
    },
    mounted() {
      this.getDataFromServer();
    },
    watch: {  //监视pagination属性的变化
      pagination: {
        deep: true,  //deep为true，会监视pagination的属性及属性中对象变化
        handler() {
          //属性变化后的回调函数，再次调用即可。
          this.getDataFromServer();
        }
      },
      search: {  //监视search属性是否变化，变化则触发调用。
        handler() {
          this.getDataFromServer();
        }
      }
    },
    methods: {
      getDataFromServer() {
        this.loading = true; // 加载数据
        // 通过axios获取数据
        this.$http.get("/item/brand/page", {
          params: {
            page: this.pagination.page, // 当前页
            rows: this.pagination.rowsPerPage, // 每页条数
            sortBy: this.pagination.sortBy, // 排序字段
            desc: this.pagination.descending, // 是否降序
            key: this.search // 查询字段
          }
        }).then(resp => { // 获取响应结果对象
          this.totalBrands = resp.data.total; // 总条数
          this.brands = resp.data.items; // 品牌数据
          this.loading = false; // 加载完成
        });
      },
      //添加
      addBrand() {
        this.show = true;
        this.isEdit = false;

        //避免新增弹出款有旧值，清除掉即可
        this.oldBrand = {
          name: '',
          letter: '',
          image: '',
          categories: []
        }
      },
      //编辑
      editBrand(oldBrand) {
        this.$http.get("/item/category/bid/" + oldBrand.id)
          .then(({data}) => {
            //控制弹框可见
            this.show = true;
            //修改标记
            this.isEdit = true;
            //获取要编辑的brand数据
            this.oldBrand = oldBrand;
            //回显商品分类
            this.oldBrand.categories = data;
          });
      },
      deleteBrand(brandId) {
        this.$http.get('/item/brand/delete/' + brandId)
          .then(() => {
            this.$message.success("删除成功！");
            this.getDataFromServer();
          })
          .catch(() => {
            this.$message.error('删除失败！');
          });
      },
      closeWindow() {
        //关闭窗口
        this.show = false;

        //重新加载数据
        this.getDataFromServer();
      }
    }
  }
</script>

<!-- scope：表示当前样式只作用于当前组件的节点 -->
<style scoped>

</style>
